<template>
  <div class="departments">
    <!-- 添加ei-card -->
    <el-card>
      <div class="content">
        <el-tabs v-model="activeName" class="mytabs">
          <el-tab-pane label="组织构架" name="first"></el-tab-pane>
        </el-tabs>
        <!-- 组织结构区 -->
        <div class="dept">
          <!-- 上面的组织架构 -->
          <treetools class="header" :data="headerData" :isheader="true" @addShow="addShow"></treetools>
          <!-- <el-row class="header">
            <el-col :span="12">
              <i class="el-icon-s-home"></i>
              传智教育
            </el-col>
            <el-col :span="12" style="text-align: right">
              <span class="manager">负责人</span>
              <el-dropdown>
                <span class="el-dropdown-link"> 操作<i class="el-icon-arrow-down el-icon--right"></i> </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>添加子部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row> -->
          <!-- 下面的组织构架 -->
          <el-tree :data="data" default-expand-all>
            <treetools
              slot-scope="{ data }"
              @getNewData="getDeptList"
              :data="data"
              :isheader="false"
              @addShow="addShow"
              @editShow="editShow"
            >
            </treetools>
            <!-- <el-row style="width: 100%" slot-scope="{ data }">
              <el-col :span="12">
                <i class="el-icon-upload"></i>
                {{ data.label }}
              </el-col>
              <el-col :span="12" style="text-align: right">
                <span class="manager">管理员</span>
                <el-dropdown>
                  <span class="el-dropdown-link"> 操作<i class="el-icon-arrow-down el-icon--right"></i> </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>添加子部门</el-dropdown-item>
                    <el-dropdown-item>查看部门</el-dropdown-item>
                    <el-dropdown-item>删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row> -->
          </el-tree>
        </div>
      </div>
    </el-card>
    <!-- 新增部门 -->
    <addDept :currentid="currentid" :dialogShow.sync="dialogShow" @updateData="getDeptList" ref="mypanel"></addDept>
  </div>
</template>

<script>
import { getDeptListApi } from '@/api/departments'
export default {
  data() {
    return {
      activeName: 'first',
      data: [],
      headerData: {},
      dialogShow: false,
      // 定义一个当前操作数据的id
      currentid: ''
    }
  },
  methods: {
    // 新增组件的显示隐藏
    addShow(currentid) {
      this.dialogShow = true
      // 保存当前操作数据的id
      this.currentid = currentid
    },
    // 定义得到数据的方法
    async getDeptList() {
      const res = await getDeptListApi()
      this.data = this.trunData(res.data.data.depts, '')
      this.headerData = res.data.data.depts[0]
      this.headerData.manager = '管理员'
    },
    // 数据转化为嵌套关系
    trunData(data, pid) {
      var result = []
      data.forEach(item => {
        if (item.pid === pid) {
          var children = this.trunData(data, item.id)
          item.children = children
          result.push(item)
        }
      })
      return result
    },
    // 打开编辑面板
    editShow(currentid) {
      this.dialogShow = true
      this.$refs.mypanel.getDeptById(currentid)
    }
  },
  created() {
    this.getDeptList()
  },
  components: {
    treetools: () => import('./components/tree-tools.vue'),
    addDept: () => import('./components/add-dept.vue')
  }
}
</script>

<style lang="scss" scoped>
.departments {
  margin: 20px;
  .mytabs {
    margin: 40px;
  }
  .dept {
    padding: 0 100px;
  }
  .header {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
}
</style>
